<template>
    <div class="helper">
        <span class="left">待办事项：{{unFinished}}</span>
        <span class="tabs">
            <span
               v-for="state in states"
               :key="state"
               :class="[state,filter === state ? '已完成' : '']"
                @click="toggleFilter(state)">
                {{state}}
            </span>
        </span>
        <span
            class="clear"
            @click="clearAllCompleted"
        >删除已完成事项</span>
    </div>
</template>

<script>
    export default {
        props:{
            filter:{
                type:String,
                required:true,
            },
            todos:{
                type:Array,
                required:true
            }
        },
        computed:{
          unFinished(){
              return this.todos.filter(todo=>!todo.completed).length
          }
        },
        name: "tabs",
        data(){
            return {
                states:['所有','待完成','已完成']
            }
        },
        methods:{
            toggleFilter(state){
                this.$emit('toggle',state)
            },
            clearAllCompleted(){
                this.$emit('clearAllCompleted')
            },
        },
    }
</script>

<style scoped lang="stylus">
    .helper{
        font-weight 100
        display flex
        justify-content space-between
        padding 5px 0
        line-height 30px
        background-color #fff
        font-size 14px
        font-smoothing: antialiased
    }

    .left, .clear, .tabs{
        padding 0 10px
        box-sizing border-box
    }

    .left, .clear{
        width 150px
    }

    .left{
        text-align left
    }

    .clear{
        text-align right
        cursor pointer
    }

    .tabs{
         width 200px
         display flex
         justify-content space-around
        * {
            display inline-block
            padding 0 10px
            cursor pointer
            border 1px solid rgba(175,47,47,0)
            &.actived{
                border-color rgba(175,47,47,0.4)
                border-radius 5px
            }
        }
    }
</style>